<template>
    <el-card>
        <template #header>
            <div class='card-header'>
                <span>添加项目</span>
            </div>
        </template>

        <el-steps
            :active='active'
            finish-status='success'
            process-status='process'
            align-center
            style='margin-top: 20px;margin-bottom: 20px;'
        >
            <el-step title='项目信息' />
            <el-step title='成功' />
        </el-steps>
        <el-row>
            <el-col :span='20' :offset='2'>
                <el-form
                    v-if='active == 0'
                    ref='formRef'
                    :model='form'
                    :rules='rules'
                    label-width='120px'
                >
                    <el-form-item label='工程名称' prop='project'>
                        <el-input v-model='form.project' />
                    </el-form-item>

                    <el-form-item label='联系人' prop='contracts'>
                        <el-input v-model='form.contracts' />
                    </el-form-item>

                    <el-form-item label='联系人电话' prop='tel'>
                        <el-input v-model='form.tel' />
                    </el-form-item>

                    <el-form-item label='工程地址' prop='address'>
                        <el-input v-model='form.address' />
                    </el-form-item>

                    <el-form-item label='见证人' prop='jzr'>
                        <el-input v-model='form.jzr' />
                    </el-form-item>

                    <el-form-item label='见证人电话' prop='jzrdh'>
                        <el-input v-model='form.jzrdh' />
                    </el-form-item>

                    <el-form-item label='见证人证号' prop='jzrzh'>
                        <el-input v-model='form.jzrzh' />
                    </el-form-item>

                    <el-form-item label='监理单位' prop='moniterUnit'>
                        <el-input v-model='form.moniterUnit' />
                    </el-form-item>

                    <el-divider content-position='left'>非必填项</el-divider>

                    <el-form-item label='建筑面积' prop='area'>
                        <el-input v-model='form.area' />
                    </el-form-item>

                    <el-form-item label='结构层数' prop='structure'>
                        <el-input v-model='form.structure' />
                    </el-form-item>

                    <el-form-item label='送检方式' prop='checkType'>
                        <el-input v-model='form.checkType' />
                    </el-form-item>

                    <el-form-item label='建设单位' prop='buildUnit'>
                        <el-input v-model='form.buildUnit' />
                    </el-form-item>

                    <el-form-item label='检测单位' prop='testUnit'>
                        <el-input v-model='form.testUnit' />
                    </el-form-item>

                    <el-form-item label='送样人' prop='syr'>
                        <el-input v-model='form.syr' />
                    </el-form-item>

                    <el-form-item label='是否完工'>
                        <el-radio-group v-model='form.finish'>
                            <el-radio-button label='0'>未完工</el-radio-button>
                            <el-radio-button label='1'>已完工</el-radio-button>
                        </el-radio-group>
                    </el-form-item>


                    <el-form-item label='开工日期' prop='startDate'>
                        <el-date-picker
                            v-model='form.startDate'
                            type='date'
                            placeholder='选择日期'
                        />
                    </el-form-item>

                    <el-form-item label='完工日期' prop='endDate'>
                        <el-date-picker
                            v-model='form.endDate'
                            type='date'
                            placeholder='选择日期'
                        />
                    </el-form-item>

                    <el-form-item label='基础形式' prop='baseKind'>
                        <el-input v-model='form.baseKind' />
                    </el-form-item>

                    <el-form-item label='施工单位' prop='doingUnit'>
                        <el-input v-model='form.doingUnit' />
                    </el-form-item>

                    <el-form-item label='进度' prop='progress'>
                        <el-input v-model='form.progress' />
                    </el-form-item>

                    <el-form-item label='完工面积' prop='finishArea'>
                        <el-input v-model='form.finishArea' />
                    </el-form-item>

                    <el-form-item label='设计单位' prop='designUnit'>
                        <el-input v-model='form.designUnit' />
                    </el-form-item>

                    <el-form-item label='备注'>
                        <el-input v-model='form.other' type='textarea' />
                    </el-form-item>

                </el-form>
                <el-button v-if='active == 0' type='primary' @click='next'>提交</el-button>

                <el-result
                    v-if='active==1'
                    icon='success'
                    title='添加成功'
                    sub-title='委托单位添加成功'
                >
                    <template #extra>
                        <el-button type='primary' @click='active = 0'>返回</el-button>
                    </template>
                </el-result>

            </el-col>
        </el-row>

    </el-card>


</template>

<script lang='ts'>
import { defineComponent, reactive, ref } from 'vue'
import { IClientForm } from '/@/type/views/Client/ClientAdd'
import type { ElForm } from 'element-plus'
// 网络请求
import { addProject as AddProject } from '/@/api/Project'
import { validate } from '/@/utils/formExtend'
import { ElNotification } from 'element-plus'
import router from '/@/router'
import { IProjectTableAdd } from '/@/type/views/Project/ProjectAdd'

type FormInstance = InstanceType<typeof ElForm>

// 添加工程
const addProject = async(form: IProjectTableAdd) => {
    const res = await AddProject(form)
    ElNotification({
        title: '成功',
        message: res.data.message,
        type: 'success'
    })
    await router.push('/project/projectList')
    return true
}

const add = (form: IProjectTableAdd) => {
    const formRef = ref<FormInstance>()
    const active = ref(0)
    const rules = reactive({
        project:[
            { required: true, message: '请输入工程名称', trigger: 'blur' },
            { min: 2, max: 10, message: '长度在 2 到 16 个字符', trigger: 'blur' }
        ],
        contracts:[
            { required: true, message: '请输入联系人', trigger: 'blur' },
            { min: 2, max: 10, message: '长度在 2 到 16 个字符', trigger: 'blur' }
        ],
        tel:[
            { required: true, message: '请输入联系电话', trigger: 'blur' },
            { min: 2, max: 10, message: '长度在 2 到 16 个字符', trigger: 'blur' }
        ],
        address:[
            { required: true, message: '请输入工程地址', trigger: 'blur' },
            { min: 2, max: 10, message: '长度在 2 到 16 个字符', trigger: 'blur' }
        ], jzr:[
            { required: true, message: '请输入见证人', trigger: 'blur' }
        ], jzrdh:[
            { required: true, message: '请输入见证人电话', trigger: 'blur' }
        ], jzrzh:[
            { required: true, message: '请输入见证人证号', trigger: 'blur' }
        ],moniterUnit:[
            { required: true, message: '请输入监理单位', trigger: 'blur' }
        ]
    })
    const next = async() => {
        switch (active.value) {
        case 0:
            if (!await validate(formRef)) return
            await addProject(form)
            active.value = 1
            break
        default:
            break
        }
    }

    return { rules, formRef, next, active }
}

export default defineComponent({
    name: 'ProjectAdd',
    components: {},
    setup() {
        const form: IProjectTableAdd = reactive({
            address: '',
            area: '',
            baseKind: '',
            buildUnit: '',
            checkType: '',
            contracts: '',
            createTime: '',
            designUnit: '',
            doingUnit: '',
            endDate: '',
            finish: 0,
            finishArea: '',
            item1: '',
            item2: '',
            item3: '',
            item4: '',
            item5: '',
            jzr: '',
            jzrdh: '',
            jzrzh: '',
            moniterUnit: '',
            other: '',
            progress: '',
            project: '',
            receiver: '',
            startDate: '',
            structure: '',
            syr: '',
            tel: '',
            testUnit: ''
        })

        return {
            form,
            ...add(form)
        }
    }
})
</script>
